<template>
	<view class="content">
		<view class="content-box">
			<view class="message-box">
				<view class="title item">
					场地：{{viewData.changdi}}
				</view>

				<view class="fukuan item">
					付款方式：{{viewData.fukuan_way}}
				</view>

				<view class="time item">
					付款方式：{{viewData.name}}
				</view>

				<view class="renshu item">
					组队人数：{{viewData.baoming_renshu}}
				</view>

				<view class="yijing">
					已加入人数：{{viewData.yibaoming_renshu}}
				</view>
			</view>
			<view class="message-item">
				<view class="none" v-if='viewData.baoming_list == []'>
					当前没有组队
				</view>
				<view class="item" v-for="(item,i) in viewData.baoming_list" :key="i">
					<img class="img" v-if="item.touxiang != '' " :src="base64Img(item.touxiang)" alt="" />
					<img class="img" v-if="item.touxiang == '' "  src="../../static/minilogo.png" alt="" />
				</view>
			</view>
			<view class="btn" @click="jiaruBtnClick()">
				加入组队
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getChanguanZuduiMessage,
		getJiaruChangguanZudui,
		getExitChangguanZudui
	} from '@/api/api.js'

	import {
		ref,
		reactive
	} from 'vue'

	import {
		onLoad
	} from '@dcloudio/uni-app'
	
	import {
		base64Img
	} from '@/tools/tools.js'

	const openid = ref('')
	const changguanid = ref('')
	const zuduiid = ref('')
	const viewData = ref({})

	const formatTimeRange = (timeRange) => {
		if (typeof timeRange !== 'string' || !timeRange.includes('~')) {
			console.error('Invalid time range:', timeRange); // 输出错误信息，帮助调试
			return ''; // 或者返回一个默认值，比如空字符串
		}

		// 分割开始时间和结束时间
		let [startTime, endTime] = timeRange.split('~');

		// 格式化开始时间
		let startDate = new Date(startTime);
		let startMonth = startDate.getMonth() + 1; // 获取月份（注意，月份从0开始）
		let startDay = startDate.getDate();
		let startHour = startDate.getHours();
		let startMinute = startDate.getMinutes().toString().padStart(2, '0');

		// 格式化结束时间
		let endDate = new Date(endTime);
		let endHour = endDate.getHours();
		let endMinute = endDate.getMinutes().toString().padStart(2, '0');

		// 生成最终的格式化字符串
		return `${startMonth}月${startDay}日 ${startHour}:${startMinute} 到 ${endHour}:${endMinute}`;
	}

	// 获取官方组队信息
	const _getChanguanZuduiMessage = (id) => {
		getChanguanZuduiMessage(id).then((res) => {
			console.log(res);
			if (res.result == '没有记录') {
				uni.showModal({
					title: '提示',
					content: '场馆目前没有组队',
					success() {
						uni.navigateBack()
					}
				})
			} else {
				viewData.value = res
				zuduiid.value = res.dazudui_record_id
			}
		})
	}
	// 加入组队
	const jiaruBtnClick = () => {
		let id = zuduiid.value
		console.log(id, openid.value);
		getJiaruChangguanZudui(id, openid.value).then((res) => {
			console.log(res);
			
			setTimeout(()=>{
				_getChanguanZuduiMessage(changguanid.value)
			},1000)
		})
	}

	// 退出组队
	const exitZudui = () => {

	}
	onLoad((res) => {
		changguanid.value = res.id
		_getChanguanZuduiMessage(res.id)

		uni.getStorage({
			key: 'openid',
			success: function(res) {
				openid.value = res.data.openid
			}
		})
	})
</script>

<style lang="scss" scoped>
	.content {
		background-color: powderblue;

		.content-box {
			padding: 20rpx;

			.message-box {
				padding: 30rpx;
				background-color: white;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.item {
					margin-bottom: 20rpx;
				}
			}

			.message-item {
				padding: 30rpx;
				border-radius: 10rpx;
				background-color: white;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 10px;
				.none {
					width: 100%;
					text-align: center;
					padding: 60rpx 0;
				}
				.item {
					width: 100%;
					padding: 10rpx;
					
					.img {
						width: 140rpx;
						height: 140rpx;
						border-radius: 18rpx;
					}
				}
			}

			.btn {
				margin-top: 20rpx;
				width: 100%;
				line-height: 120rpx;
				text-align: center;
				background-color: white;
				border-radius: 10rpx;
			}
		}
	}
</style>